<script setup>
// 引入 api
import { computed, ref } from "vue"

// 样式
const lineHeight = ref({
    lineHeight: ""
})

// 主题类对象
const subject = ref({
    default: true,
    primary: false,
    danger: false
})

// 文本
const text = ref('')

// 计算属性
const content = computed(() => {
    lineHeight.value.lineHeight = `${text.value}`
})

// 点击函数
function btn() {
    if (subject.value.default) {
        subject.value.default = false
        subject.value.primary = true
    } else if (subject.value.primary) {
        subject.value.primary = false
        subject.value.danger = true
    }
    else if (subject.value.danger) {
        subject.value.danger = false
        subject.value.default = true
    }
}
</script>

<template>
    {{ content }}
    <!-- 标题 -->
    <div :class="subject">
        <h1>卡片组件</h1>
        <!-- 描述文本 -->
        <input type="text" v-model.trim="text" placeholder="请输入行高">
        <p :style="lineHeight">这是一段描述文本</p>
        <!-- 按钮 -->
        <input type="button" value="切换主题" @click="btn">
    </div>
</template>

<style scoped>
/* default 主题 */
[type="button"] {
    padding: 10px;
    border-radius: 5px;
}

.default {
    background-color: rgb(72, 201, 136);
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 20px;
    border-radius: 10px;
}

.default [type="button"] {
    color: rgb(255, 255, 255);
    background-color: rgb(72, 201, 136);
    border: 1px rgb(255, 255, 255) solid;
}

/* primary 主题 */
.primary {
    background-color: rgb(240, 102, 102);
    color: rgb(240, 189, 123);
    text-align: center;
    padding: 20px;
    border-radius: 10px;
}

.primary [type="button"] {
    color: rgb(240, 189, 123);
    background-color: rgb(240, 102, 102);
    border: 1px rgb(240, 189, 123) solid;
}

/* danger 主题 */
.danger {
    background-color: rgb(122, 122, 177);
    color: rgb(197, 202, 239);
    text-align: center;
    padding: 20px;
    border-radius: 10px;
}

.danger [type="button"] {
    color: rgb(197, 202, 239);
    background-color: rgb(122, 122, 177);
    border: 1px rgb(197, 202, 239) solid;
}
</style>